<template>
  <div class="page">
    <div class="w3layouts-main">
      <div class="bg-layer">
      <div class="title-line">
        <span class="tit" style="font-size: 38px;">登录</span>
      </div>
          <div class="login-container">
            <div id="login-form">
              <Form ref="loginFormData" :model="loginFormData" :rules="ruleValidate">
                <FormItem  prop="userName">
                  <Input prefix="ios-contact" v-model="loginFormData.userName" placeholder="用户名" size="large" clearable style="width: 400px;margin-top: 20px;" />
                </FormItem>
                <FormItem  prop="password">
                  <Input prefix="ios-lock" v-model="loginFormData.password" type="password" password placeholder="密码" size="large" clearable style="width: 400px;margin-top: 20px;" />
                </FormItem>
                <Checkbox v-model="rememberMeF" type="primary" size="large" style="display: block;text-align: left;margin-top: 20px;margin-left: 10px;color: white" @on-change="rememberMeChange">记住我  不是自己的电脑不要勾选此选项</Checkbox>

                <Button type="primary" size="large" style="width: 150px;margin-top: 20px;" @click="handleSubmit('loginFormData')">登录</Button>
                <Button type="primary" size="large" style="width: 150px;margin-top: 20px;" @click="toSignUpPage">注册</Button>
                <!--<Button type="primary" size="large" style="width: 150px;margin-top: 20px;" @click="test">测试</Button>-->
                <!--<span>{{testV}}</span>-->
              </Form>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>



<script>
  import ManageService from '@/services/ManageService'
  import AuthPermissionService from '@/services/AuthPermissionService'
  import cookies from 'js-cookie'
  export default {
    name: "LoginComponent",
    data () {
      return {
        loginFormData: {
          userName: '',
          password: ''
        },
        rememberMeF:false,
        manageService:null ,
        authPermissionService:null,
        testV:true,
        ruleValidate: {
          userName: [
            { required: true, message: '用户名不能为空', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ],
        }
      }
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        this.manageService = new ManageService(this);
        if(cookies.get("rememberMeF") == "true") {
          this.rememberMeF = true;
          this.loginFormData.userName = cookies.get("userName");
          this.loginFormData.password = cookies.get("password");
        }
        else this.rememberMeF = false;
      },
      login() {
        let params = {
          "userName": this.loginFormData.userName,
          "password": this.loginFormData.password
        };
        return {"isSuccess" : this.manageService.login(params).isSuccess}
      },
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            if(this.login().isSuccess){
              this.$Message.success('登录成功');
            }
            else{
              this.$Message.error('用户名不存在或密码错误');
            }
          } else {
            this.$Message.error('请正确填写信息');
          }
        })
      },
      handleReset (name) {
        this.$refs[name].resetFields();
      },
      rememberMeChange() {
        if(this.rememberMeF){
          console.log(true);
          cookies.set("rememberMeF","true");
          cookies.set("password",this.loginFormData.password);
        }
        else{
          console.log(false);
          cookies.set("rememberMeF","false");
          cookies.set("password","");
        }
      },
      toSignUpPage() {
        this.$router.push({path:'/signUp'})
      }
      // test(){
      //   this.authPermissionService = new AuthPermissionService(this);
      //   Promise.resolve(this.authPermissionService.testRoleAuth()).then(result => {
      //     this.testV = result;
      //   })
      // }
    }
  }
</script>


<style scoped>
  @import url("../assets/css/style.css");
  @import url("../assets/css/font-awesome.min.css");
  .page {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .title-line {
    width: 980px;
    height: 28px;
    margin: 0 auto;
    border-bottom: 1px solid #c5c5c5;
    margin-bottom: 28px;
    text-align: center;
    color: white;
    margin-top: 20px;
  }
  .title-line .tit {
    height: 56px;
    line-height: 56px;
    margin: 0 auto;
    padding: 0 20px;
    font-size: 40px;
    background-color: rgba(76,76,76,1);
    text-align: center;
  }
  .login-container {
    width: 450px;
    margin: 0 auto;
    padding: 60px 0;
    background-color: rgba(0,0,0,0.3);
    height: 500px;
    border-radius:20px
  }
  #login-form {
    text-align: center;
    width: 420px;
    margin: 0 auto;
    font-size: 12px;
    position: relative;
  }
</style>
